<template>
  <div class="identity-box">

    <v-step :list="barList" :titleType=4 :step=2></v-step>

    <div class="line-box"></div>
    <div class="wrap-box">
      <div class="title1">银行卡号:</div>
      <div class="title2 bankName"><input type="text" maxlength="19" placeholder="请输入银行卡号" class="input-box"
                                          v-model="cardNo"
                                          @input="checkCardNum" @blur="inputBlur"/></div>
      <div class="title3">
        <img src="../../assets/img/icon_1.png" class="icon" v-if="showName === 1" onclick="return false"/>
        <img src="../../assets/img/icon_2.png" class="icon" v-else-if="showName === 2" onclick="return false"/>
      </div>
    </div>

    <div class="wrap-box">
      <div class="title1">银行名称:</div>
      <div class="title2 bankName" @click="open">
        <span class="bank">{{bankName}}</span>
      </div>
      <div class="title3"><img src="./pull.png" class="pull"/></div>
    </div>

    <div class="wrap-box">
      <div class="title1">银行卡归属地:</div>
      <div class="title2 address">
        <x-address :title="title" v-model="value" :list="addressData" placeholder="请选择银行卡归属地" :show.sync="showAddress"
                   @on-hide="selectArea"
                   id="belongAddr"></x-address>
      </div>
      <div class="title3"><img src="./pull.png" class="pull" onclick="return false"/></div>
    </div>

    <div class="btn-box" v-show="hideBtn">
      <button type="button" class="btn back" @click="backStep">上一步</button>
      <button type="button" class="btn next" @click="nextStep">下一步</button>
    </div>

    <div class="bank-box" v-show="showBank">
      <div class="bank-list">
        <div class="name" v-for="(item,index) in bankList" :key="index" @click="selectBank(item)">{{item}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import step from "../../components/flow"
  import {XAddress, ChinaAddressV4Data} from 'vux'

  export default {
    data() {
      return {
        cardNo: "",
        bankArea: "",
        showName: "",
        title: '',
        value: [],
        addressData: ChinaAddressV4Data,
        showAddress: false,
        barList: ['身份证信息', '银行卡扫描', '银行卡信息', '设置提现密码'],
        bankName: "请选择银行名称",
        showBank: false,
        bankList: ["招商银行", "兴业银行", "中国建设银行", "中国工商银行", "中国农业银行", "中国银行", "交通银行", "中国邮政储蓄银行", "光大银行", "广发银行", "平安银行", "华夏银行", "浙商银行"],
        docmHeight: document.documentElement.clientHeight,//默认屏幕高度
        showHeight: document.documentElement.clientHeight,//实时屏幕高度
        hideBtn: true//显示或者隐藏
      }
    },
    created() {
      let cardNum = sessionStorage.getItem("card_no");
      if (cardNum != "" && cardNum != undefined) {
        this.cardNo = this.$decruption(cardNum);
      }

      let bankName = sessionStorage.getItem("bank_name");
      if (bankName) {
        if (bankName.indexOf("招商") != -1) {
          this.bankName = "招商银行";
        } else if (bankName.indexOf("建设") != -1) {
          this.bankName = "中国建设银行";
        } else if (bankName.indexOf("兴业") != -1) {
          this.bankName = "兴业银行";
        } else if (bankName.indexOf("农业") != -1) {
          this.bankName = "中国农业银行";
        } else if (bankName.indexOf("工商") != -1) {
          this.bankName = "中国工商银行";
        } else if (bankName.indexOf("中国银行") != -1) {
          this.bankName = "中国银行";
        } else if (bankName.indexOf("交通") != -1) {
          this.bankName = "交通银行";
        } else if (bankName.indexOf("邮储") != -1) {
          this.bankName = "中国邮政储蓄银行";
        } else if (bankName.indexOf("光大") != -1) {
          this.bankName = "光大银行";
        } else if (bankName.indexOf("广发") != -1) {
          this.bankName = "广发银行";
        } else if (bankName.indexOf("平安") != -1) {
          this.bankName = "平安银行";
        } else if (bankName.indexOf("华夏") != -1) {
          this.bankName = "华夏银行";
        } else if (bankName.indexOf("浙商") != -1) {
          this.bankName = "浙商银行";
        }
      }
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          this.showHeight = document.body.clientHeight;
        })()
      };
    },
    methods: {
      checkCardNum() {//校验银行卡号
        let reg = /^(\d{16}|\d{17}|\d{18}|\d{19})$/;
        if (!reg.test(this.cardNo)) {
          this.showName = 2;
        } else {
          this.showName = 1;
        }
      },
      checkBankArea(area) {//校验归属地
        let reg = /^(\d{16}|\d{17}|\d{18}|\d{19})$/; //银行卡号
        if (this.cardNo == "" || this.cardNo == null) {
          this.$vux.toast.text("请输入银行卡号", "middle");
          return;
        } else if (!reg.test(this.cardNo)) {
          this.$vux.toast.text("请输入正确的银行卡号", "middle");
          return;
        }
        if (this.bankName == "" || this.bankName == null || this.bankName == "请选择银行名称") {
          this.$vux.toast.text("请选择银行名称", "middle");
          return;
        }
        if (area == "" || area == null) {
          this.$vux.toast.text("请选择银行卡归属地", "middle");
          return;
        }
        return true;
      },
      backStep() {//上一步
        sessionStorage.removeItem("card_no");
        sessionStorage.removeItem("bank_addr");
        this.$router.go(-1);
      },
      nextStep() {//下一步
        let address = document.getElementById("belongAddr").innerText.substring(0, 9);
        let area = address == "请选择银行卡归属地" ? "" : document.getElementById("belongAddr").innerText; //银行卡归属地
        if (this.checkBankArea(area)) {
          let array = area.split(" ");
          if (array.length == 1) {
            this.bankArea = array[0].replace('\n', "");
          } else {
            this.bankArea = area.replace(/\s*/g, "");
          }
          sessionStorage.setItem("card_no", this.$encruption(this.cardNo));
          sessionStorage.setItem("bank_addr", this.bankArea);
          sessionStorage.setItem("bank_name", this.bankName);
          this.$router.push("/setpwd_asce");
        }
      },
      inputBlur() {
        window.scrollTo(0, 0)
      },
      open() {
        this.showBank = true;
      },
      selectBank(name) {//选择银行
        this.bankName = name;
        this.showBank = false;
      },
      selectArea(type, value) {//选择银行卡归属地
        if (type) {
          let array = value.split(" ");
          if (array[0] == array[1]) {
            this.value.pop();
          }
        }
      },
    },
    watch: {
      showHeight() {
        if (this.docmHeight > this.showHeight) {
          this.hideBtn = false;
        } else {
          this.hideBtn = true;
        }
      }
    },
    components: {
      "v-step": step,
      XAddress
    }
  }
</script>

<style lang="stylus" scoped>
  .identity-box
    width: 100%
    height: 100%
    overflow: hidden
    .header-box
      display: flex
      align-items: center
      justify-content: center
      width: 100%
      height: 1.373rem
      border-bottom: 1px solid rgba(230, 230, 230, 1)
      .title
        font-size: 0.533rem
        color: rgba(27, 27, 27, 1)
        .back
          position: absolute
          left: 0.573rem
          width: 0.267rem
          height: 0.493rem
    .line-box
      margin-top: 0.493rem
      height: 0.28rem
      background: rgba(242, 242, 242, 1)
    .wrap-box
      display: flex
      align-items: center
      margin-left: 3.6%
      width: 96.4%
      height: 1.333rem
      border-bottom: 1px solid rgba(230, 230, 230, 1)
      .title1
        height: 0.56rem
        line-height: 0.56rem
        font-size: 0.44rem
        color: rgba(68, 68, 68, 1)
      .title2
        padding-left: 0.107rem
        font-size: 0.44rem
        color: rgba(68, 68, 68, 1)
        .input-box
          width: 100%
          vertical-align: middle
          line-height: 0.56rem
          font-size: 0.44rem
          color: rgba(68, 68, 68, 1)
      .bankName
        height: 0.6rem
        line-height: 0.6rem
        width: 60%
        .bank
          display: block
          width: 100%
          font-size: 0.44rem
          color: rgba(68, 68, 68, 1)
      .address
        width: 53%;
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
        display: flex
        height: 0.6rem
        line-height: 0.6rem
        padding-top: 0.1rem
        padding-bottom: 0.1rem
      .address >>> .weui-cell .vux-popup-picker-placeholder
        color: #cccccc
      .address >>> .weui-cell .vux-popup-picker-value
        color: rgba(68, 68, 68, 1)
      .title3
        margin-left: auto
        margin-right: 0.373rem
        .icon
          width: 0.533rem
          height: 0.533rem
        .pull
          width: 0.387rem
          height: 0.213rem
    .btn-box
      position: fixed
      bottom: 0.48rem
      width: 100%
      text-align: center
      .btn
        width: 45.33%
        height: 1.333rem
        border: 1px solid rgba(60, 175, 255, 1)
        border-radius: 0.107rem
        font-size: 0.48rem
      .back
        color: rgba(60, 175, 255, 1)
        background: rgba(255, 255, 255, 1)
      .next
        margin-left: 0.187rem
        color: rgba(255, 255, 255, 1)
        background: rgba(60, 175, 255, 1)
    .bank-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 88
      display: flex
      align-items: center
      justify-content: center
      background-color: rgba(0, 0, 0, 0.5)
      .bank-list
        position: fixed
        z-index: 99
        bottom: 0
        left: 0
        width: 100%
        height: 3.88rem
        background: #FFF
        overflow: auto
        .name
          display: flex
          align-items: center
          justify-content: center
          height: 1.28rem
          border-bottom: 1px solid #EEE
          cursor: pointer
          font-size: 0.44rem
          color: #666666
          &:hover
            color: #3CAFFF
</style>

